<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 7.3.0">
<link rel="preconnect" href="https://cdn.staticfile.net" crossorigin>
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-round.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-round.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-round.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.6.0/css/all.min.css" integrity="sha256-5eIC48iZUHmSlSUz9XtjRyK2mzQkHScZY1WdMaoz74E=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"wangjiezhe.gitee.io","root":"/","images":"/images","scheme":"Gemini","darkmode":true,"version":"8.21.1","exturl":true,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"copycode":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":true,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":"disqusjs","storage":true,"lazyload":true,"nav":{"disqusjs":{"text":"Disqus","order":1},"giscus":{"text":"GitHub","order":2},"discussbot":{"text":"Telegram","order":3}},"activeClass":"disqusjs"},"stickytabs":false,"motion":{"enable":false,"async":true,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":1,"unescape":false,"preload":false,"style":"flat"}}</script><script src="/js/config.js"></script>

    <meta name="description" content="重新构建了博客的页面，记录了一些遇到的问题和解决办法">
<meta property="og:type" content="article">
<meta property="og:title" content="博客的重构与回顾">
<meta property="og:url" content="https://wangjiezhe.gitee.io/posts/2018-10-05-refactor-blog/index.html">
<meta property="og:site_name" content="如鱼饮水">
<meta property="og:description" content="重新构建了博客的页面，记录了一些遇到的问题和解决办法">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2018-10-05T07:06:59.000Z">
<meta property="article:modified_time" content="2018-10-23T17:25:06.000Z">
<meta property="article:author" content="西风冷香">
<meta property="article:tag" content="Fedora">
<meta property="article:tag" content="Blog">
<meta property="article:tag" content="ArchLinux">
<meta property="article:tag" content="Hexo">
<meta property="article:tag" content="NexT">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="https://wangjiezhe.gitee.io/posts/2018-10-05-refactor-blog/">


<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://wangjiezhe.gitee.io/posts/2018-10-05-refactor-blog/","path":"/posts/2018-10-05-refactor-blog/","title":"博客的重构与回顾"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>博客的重构与回顾 | 如鱼饮水</title>
  
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-48537410-1"></script>
  <script class="next-config" data-name="google_analytics" type="application/json">{"tracking_id":"UA-48537410-1","only_pageview":false,"measure_protocol_api_secret":null}</script>
  <script src="/js/third-party/analytics/google-analytics.js"></script>

  <script src="/js/third-party/analytics/baidu-analytics.js"></script>
  <script async src="https://hm.baidu.com/hm.js?a51d31f349bffa6e3757f7d6fca0c47f"></script>


  <script data-pjax defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{&quot;token&quot;: &quot;a64c9e77fe904641b6e6b04b0e80969c&quot;}'></script>





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
<link rel="alternate" href="/atom.xml" title="如鱼饮水" type="application/atom+xml">
<link rel="alternate" href="/rss2.xml" title="如鱼饮水" type="application/rss+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">如鱼饮水</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">冷暖自知</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-links"><a href="/links/" rel="section"><i class="fa fa-link fa-fw"></i>友链</a></li><li class="menu-item menu-item-fcircle"><a href="/fcircle/" rel="section"><i class="fa fa-user-group fa-fw"></i>朋友圈</a></li><li class="menu-item menu-item-tools"><a href="/tools/" rel="section"><i class="fa fa-rocket fa-fw"></i>工具</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
      <div class="search-header">
        <span class="search-icon">
          <i class="fa fa-search"></i>
        </span>
        <div class="search-input-container">
          <input autocomplete="off" autocapitalize="off" maxlength="80"
                placeholder="搜索..." spellcheck="false"
                type="search" class="search-input">
        </div>
        <span class="popup-btn-close" role="button">
          <i class="fa fa-times-circle"></i>
        </span>
      </div>
      <div class="search-result-container">
        <div class="search-result-icon">
          <i class="fa fa-spinner fa-pulse fa-5x"></i>
        </div>
      </div>
    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%85%A5%E5%9D%91-Linux"><span class="nav-text">1. 入坑 Linux</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%8D%9A%E5%AE%A2%E7%9A%84%E5%BB%BA%E7%AB%8B"><span class="nav-text">2. 博客的建立</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%8D%9A%E5%AE%A2%E7%9A%84%E9%87%8D%E6%9E%84"><span class="nav-text">3. 博客的重构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-%E6%96%B9%E6%A1%88%E9%80%89%E6%8B%A9"><span class="nav-text">3.1. 方案选择</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-%E6%8F%92%E4%BB%B6"><span class="nav-text">3.2. 插件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-1-%E6%95%B0%E5%AD%A6"><span class="nav-text">3.2.1. 数学</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-2-%E8%AF%84%E8%AE%BA"><span class="nav-text">3.2.2. 评论</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-3-Pangu"><span class="nav-text">3.2.3. Pangu</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-4-Han"><span class="nav-text">3.2.4. Han</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-5-canvas-nest"><span class="nav-text">3.2.5. canvas-nest</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-6-note"><span class="nav-text">3.2.6. note</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-7-reading-progress"><span class="nav-text">3.2.7. reading-progress</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2"><span class="nav-text">3.3. 自动部署</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E5%BE%85%E6%94%B9%E8%BF%9B%E7%9A%84%E9%83%A8%E5%88%86"><span class="nav-text">4. 待改进的部分</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="西风冷香"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">西风冷香</p>
  <div class="site-description" itemprop="description">某不知名机构不知名数学老师</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">67</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">19</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">103</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3dhbmdqaWV6aGU=" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wangjiezhe"><i class="fab fa-github fa-fw"></i></span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="bWFpbHRvOndhbmdqaWV6aGVAZ21haWwuY29t" title="E-Mail → mailto:wangjiezhe@gmail.com"><i class="fa fa-envelope fa-fw"></i></span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly90d2l0dGVyLmNvbS93YW5namllemhl" title="Twitter → https:&#x2F;&#x2F;twitter.com&#x2F;wangjiezhe"><i class="fab fa-twitter fa-fw"></i></span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly90Lm1lL3dhbmdqaWV6aGU=" title="Telegram → https:&#x2F;&#x2F;t.me&#x2F;wangjiezhe"><i class="fab fa-telegram fa-fw"></i></span>
      </span>
  </div>
<div id="time-now">
  <canvas id="canvas" style="width:60%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>
(function(){

  var digit=
    [
      [
        [0,0,1,1,1,0,0],
        [0,1,1,0,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,0,1,1,0],
        [0,0,1,1,1,0,0]
      ],//0
      [
        [0,0,0,1,1,0,0],
        [0,1,1,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [1,1,1,1,1,1,1]
      ],//1
      [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,1,1,0,0,0],
        [0,1,1,0,0,0,0],
        [1,1,0,0,0,0,0],
        [1,1,0,0,0,1,1],
        [1,1,1,1,1,1,1]
      ],//2
      [
        [1,1,1,1,1,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,1,1,1,0,0],
        [0,0,0,0,1,1,0],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
      ],//3
      [
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,1,0],
        [0,0,1,1,1,1,0],
        [0,1,1,0,1,1,0],
        [1,1,0,0,1,1,0],
        [1,1,1,1,1,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,1,1]
      ],//4
      [
        [1,1,1,1,1,1,1],
        [1,1,0,0,0,0,0],
        [1,1,0,0,0,0,0],
        [1,1,1,1,1,1,0],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
      ],//5
      [
        [0,0,0,0,1,1,0],
        [0,0,1,1,0,0,0],
        [0,1,1,0,0,0,0],
        [1,1,0,0,0,0,0],
        [1,1,0,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
      ],//6
      [
        [1,1,1,1,1,1,1],
        [1,1,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0]
      ],//7
      [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
      ],//8
      [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,1,1,0,0,0,0]
      ],//9
      [
        [0,0,0,0,0,0,0],
        [0,0,1,1,1,0,0],
        [0,0,1,1,1,0,0],
        [0,0,1,1,1,0,0],
        [0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0],
        [0,0,1,1,1,0,0],
        [0,0,1,1,1,0,0],
        [0,0,1,1,1,0,0],
        [0,0,0,0,0,0,0]
      ]//:
    ];

  var canvas = document.getElementById('canvas');

  if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    cxt.fillStyle = '#f00';
    cxt.fillRect(10,10,50,50);
  
    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
      var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
      //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
      data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
    })();
  
    /*生成点阵数字*/
    function renderDigit(index,num){
      for(var i = 0; i < digit[num].length; i++){
        for(var j = 0; j < digit[num][i].length; j++){
          if(digit[num][i][j] == 1){
            cxt.beginPath();
            cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
            cxt.closePath();
            cxt.fill();
          }
        }
      }
    }
  
    /*更新时钟*/
    function updateDigitTime(){
      var changeNumArray = [];
      var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
      var NewData = [];
      NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
      for(var i = data.length-1; i >=0 ; i--){
        //时间发生变化
        if(NewData[i] !== data[i]){
          //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
          changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
        }
      }
      //增加小球
      for(var i = 0; i< changeNumArray.length; i++){
        addBalls.apply(this,changeNumArray[i].split('_'));
      }
      data = NewData.concat();
    }
  
    /*更新小球状态*/
    function updateBalls(){
      for(var i = 0; i < balls.length; i++){
        balls[i].stepY += balls[i].disY;
        balls[i].x += balls[i].stepX;
        balls[i].y += balls[i].stepY;
        if(balls[i].x > W + R || balls[i].y > H + R){
          balls.splice(i,1);
          i--;
        }
      }
    }
  
    /*增加要运动的小球*/
    function addBalls(index,num){
      var numArray = [1,2,3];
      var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
      for(var i = 0; i < digit[num].length; i++){
        for(var j = 0; j < digit[num][i].length; j++){
          if(digit[num][i][j] == 1){
            var ball = {
              x:14*(R+2)*index + j*2*(R+1)+(R+1),
              y:i*2*(R+1)+(R+1),
              stepX:Math.floor(Math.random() * 4 -2),
              stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
              color:colorArray[Math.floor(Math.random()*colorArray.length)],
              disY:1
            };
            balls.push(ball);
          }
        }
      }
    }
  
    /*渲染*/
    function render(){
      //重置画布宽度，达到清空画布的效果
      canvas.height = 100;
      //渲染时钟
      for(var i = 0; i < data.length; i++){
        renderDigit(i,data[i]);
      }
      //渲染小球
      for(var i = 0; i < balls.length; i++){
        cxt.beginPath();
        cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
        cxt.fillStyle = balls[i].color;
        cxt.closePath();
        cxt.fill();
      }
    }
  
    clearInterval(oTimer);
    var oTimer = setInterval(function(){
      //更新时钟
      updateDigitTime();
      //更新小球状态
      updateBalls();
      //渲染
      render();
    },50);
  }

})();
</script>

<div id="site-days"></div>
<script>
  function show_date_time() {
    window.setTimeout("show_date_time()", 1000);
    BirthDay = new Date("2014/01/10 13:29:55");
    today = new Date();
    timeold = (today.getTime() - BirthDay.getTime());
    sectimeold = timeold / 1000;
    secondsold = Math.floor(sectimeold);
    msPerDay = 24 * 60 * 60 * 1000;
    e_daysold = timeold / msPerDay;
    daysold = Math.floor(e_daysold);
    e_hrsold = (e_daysold - daysold) * 24;
    hrsold = setzero(Math.floor(e_hrsold));
    e_minsold = (e_hrsold - hrsold) * 60;
    minsold = setzero(Math.floor((e_hrsold - hrsold) * 60));
    seconds = setzero(Math.floor((e_minsold - minsold) * 60));
    document.getElementById('site-days').innerHTML = "已运行" + daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
  }

  function setzero(i) {
    if (i < 10) {
      i = "0" + i
    }
    return i;
  }

  show_date_time();
</script>

        </div>
      </div>
    </div>

    
        <div class="pjax">
        </div>
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wangjiezhe.gitee.io/posts/2018-10-05-refactor-blog/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="西风冷香">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="如鱼饮水">
      <meta itemprop="description" content="某不知名机构不知名数学老师">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="博客的重构与回顾 | 如鱼饮水">
      <meta itemprop="description" content="重新构建了博客的页面，记录了一些遇到的问题和解决办法">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          博客的重构与回顾
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2018-10-05 15:06:59" itemprop="dateCreated datePublished" datetime="2018-10-05T15:06:59+08:00">2018-10-05</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2018-10-24 01:25:06" itemprop="dateModified" datetime="2018-10-24T01:25:06+08:00">2018-10-24</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%8D%9A%E5%AE%A2/" itemprop="url" rel="index"><span itemprop="name">博客</span></a>
        </span>
    </span>

  
    <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
    <span class="post-meta-break"></span>
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>5.2k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>13 分钟</span>
    </span>
</div>

            <div class="post-description">重新构建了博客的页面，记录了一些遇到的问题和解决办法</div>
        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><p>利用十一的时间，重新整理了一下个人博客的页面。</p>
<p>看了一下，上一篇文章还是在 2015 年 8 月，到现在已经有三年多了，我真是。。。唉</p>
<h2 id="1-入坑-Linux"><a class="header-anchor" href="#1-入坑-Linux"></a>1. 入坑 Linux</h2>
<p>记得最早接触 Linux 是在 2012 年，当时是上计概课要写代码，于是心血来潮地在电脑上安装了 Fedora（话说那时 Fedora 的版本号才是 17），然后就掉进了 Linux 的坑里一去不复返。而注册 Github 的时间是在 2013 年 8 月 15 日，具体什么原因已经不记得了。。。</p>
<p>后来想找一款能够听歌的软件，那时网易云音乐还没有出 Linux 版，FZUG 也还没有成立，我在网上偶然间发现了一款可以听歌、而且还是可以听网易云音乐的软件，那就是 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1h1U2hhb2h1YS9rd3BsYXllcg==">kwplayer<i class="fa fa-external-link-alt"></i></span>。看了下 commit，第一次提交是在 2013 年 8 月 29 号：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1h1U2hhb2h1YS9rd3BsYXllci9jb21taXQvMWUwZGU0YzBkODg5YmNjZDgyM2M1MjAwZGIzMzEzY2I5MjFlMDY2Zg==">inited<i class="fa fa-external-link-alt"></i></span>。而我应该是在10月份的时候发现的，至于在哪儿找到的已经完全不记得了。</p>
<p>还记得第一次提交 Issue 是 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1h1U2hhb2h1YS9rd3BsYXllci9pc3N1ZXMvMTE=">#11<i class="fa fa-external-link-alt"></i></span> 和 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1h1U2hhb2h1YS9rd3BsYXllci9pc3N1ZXMvMTI=">#12<i class="fa fa-external-link-alt"></i></span>，当时只是发现 Github 上有个可以提交 Bug 的地方，于是就随手开了两个 Issue，没想到当天都得到了详细的回复，并在三四天后都得到了解决：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1h1U2hhb2h1YS9rd3BsYXllci9jb21taXQvOWMyMWM0ZjkwOGIwMmY3N2YzNDVhYTA0ZTZlZjhjM2EyZmJhOWU1Ng==">9c21c4f<i class="fa fa-external-link-alt"></i></span> 和 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1h1U2hhb2h1YS9rd3BsYXllci9jb21taXQvOTBhMDJhODUwOGE0NzY4ODlkZjBmNWEyNGRlYmZmN2U3MDg0ZTZmZA==">90a02a8<i class="fa fa-external-link-alt"></i></span>。</p>
<p>这当时让我非常兴奋，因为以前从来没想过会这么快就得到回应，于是后来也积极地参加到其中，积极地提交 Bug，持续了有一年多的时间 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1h1U2hhb2h1YS9rd3BsYXllci9pc3N1ZXM/cT1pczppc3N1ZSthdXRob3I6d2FuZ2ppZXpoZQ==">Issued by wangjiezhe<i class="fa fa-external-link-alt"></i></span>，并开始学习 rpm 打包，发布在了 <span class="exturl" data-url="aHR0cHM6Ly9jb3ByLmZlZG9yYWluZnJhY2xvdWQub3JnL2NvcHJzL3dhbmdqaWV6aGUv">copr<i class="fa fa-external-link-alt"></i></span> 上。当然这也是我后来对 Python 感兴趣的契机之一。</p>
<p>刚又看了一下，我在 copr 上最早的一次 build 是在 <span class="exturl" data-url="aHR0cHM6Ly9jb3ByLmZlZG9yYWluZnJhY2xvdWQub3JnL2NvcHJzL3dhbmdqaWV6aGUva3dwbGF5ZXIvYnVpbGQvNzYwNC8=">2014 年 3 月 31 号<i class="fa fa-external-link-alt"></i></span>，而我能够找到的最早介绍 copr 的中文资料是 <span class="exturl" data-url="aHR0cHM6Ly9saW51eHRveS5vcmcvYXJjaGl2ZXMvZmVkb3JhLWNvcHIuaHRtbA==">Fedora Copr<i class="fa fa-external-link-alt"></i></span>，现在的 copr 网址上线是在 <span class="exturl" data-url="aHR0cHM6Ly9saXN0cy5mZWRvcmFob3N0ZWQub3JnL2FyY2hpdmVzL2xpc3QvY29wci1kZXZlbEBsaXN0cy5mZWRvcmFob3N0ZWQub3JnL3RocmVhZC9TRzdPQUg3SUlJNVREQ1NPN1RMWE9XSU9QRzdTN0YyWC8=">2013 年 12 月<i class="fa fa-external-link-alt"></i></span>， FZUG 的 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tLzFkb3Q3NWNt">mosquito<i class="fa fa-external-link-alt"></i></span> 也是从 2014 年 6 月才开始建立他的 <span class="exturl" data-url="aHR0cHM6Ly9mZWRvcmFwcm9qZWN0Lm9yZy93aWtpL1VzZXI6TW9zcXVpdG8=">myrepo<i class="fa fa-external-link-alt"></i></span> 的，话说国内比我更早开始使用 <span class="exturl" data-url="aHR0cHM6Ly9jb3ByLmZlZG9yYWluZnJhY2xvdWQub3Jn">copr<i class="fa fa-external-link-alt"></i></span> 的应该不多吧。。。</p>
<p>话说那时 <span class="exturl" data-url="aHR0cHM6Ly9ibG9nLmJpb2Zhbi5vcmcvYWJvdXQv">XuShaohua<i class="fa fa-external-link-alt"></i></span> 的 Github 账户名还是叫 LiuLang，后来他去了 Deepin，网易云音乐的 Linux 版他应该是作者之一。</p>
<p>当然后来因为各种原因我不再维护我的 copr 仓库，包括犯懒（反正有了 mosquito 的 myrepo 源，以及后来的 FZUG 源）、Fedora 的习惯性跳票让我非常不爽（这是在找借口么。。。）等等，加上后来我从 Fedora 转到了 Arch Linux 上（大概是 2015 年暑假吧），这个仓库就彻底荒废了。</p>
<h2 id="2-博客的建立"><a class="header-anchor" href="#2-博客的建立"></a>2. 博客的建立</h2>
<p>最早的一些记录文章我都发在了 QQ 空间里，显得格格不入的。后来就想找一个合适的可以放这些东西的地方。</p>
<p>期间考虑过 WordPress，不过觉得比较麻烦，还需要有地方托管；考虑过一些博客托管平台，不过没有找到太喜欢的；觉得 Blogger 不错，但又被 W 掉了。。。</p>
<p>后来看到阮一峰的的介绍文章：<span class="exturl" data-url="aHR0cDovL3d3dy5ydWFueWlmZW5nLmNvbS9ibG9nLzIwMTIvMDgvYmxvZ2dpbmdfd2l0aF9qZWt5bGwuaHRtbA==">搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门<i class="fa fa-external-link-alt"></i></span>，觉得这是个不错的选择，于是就开始折腾 Github Pages。作为一个审美盲与选择困难症患者，在众多的 Jekyll 主题中完全不知道该怎么选择，于是就随手选了一个自己觉得比较简洁明了的，也就是 ellochen 的博客主题，直接 copy 过来就用了。</p>
<p>嗯，说好听点叫简洁，说不好听呢就叫难看。。。😭</p>
<p>话说 ellochen 的 Github 账号已经不存在了，貌似是已经注销了，但好在还存留有 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3BpaTB4L2VsbG9jaGVuLmdpdGh1Yi5jb20=">Fork<i class="fa fa-external-link-alt"></i></span>（话说这就是 Fork 相较于 Star 的好处吧，我之前也有一些被删的 repo 是这么存留下来的，嗯，我指的不是 phuslu 大神，指的是垠神。。。），豆瓣小站 <span class="exturl" data-url="aHR0cHM6Ly9zaXRlLmRvdWJhbi5jb20vMTk2NzgxLw==">Gode-Mode<i class="fa fa-external-link-alt"></i></span> 貌似是他建立的。</p>
<h2 id="3-博客的重构"><a class="header-anchor" href="#3-博客的重构"></a>3. 博客的重构</h2>
<p>在那之后，博客的页面也小幅修改过几次，但大的主题方面都没有变过。曾经有想过重新选一个更好看的主题，但碍于时间原因一直没有去做。<br />
期间也在其他的 Page 中也曾经尝试过其他的主题，比如 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2htZmF5c2FsL2htZmF5c2FsLW9tZWdhLXRoZW1l">HMFAYSAL OMEGA<i class="fa fa-external-link-alt"></i></span>，整体不错，但有些华而不实了；也试过 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2tpbmdjb25zL2NvbGVzbGF3">coleslaw<i class="fa fa-external-link-alt"></i></span>，但又太过简单了。</p>
<p>直到第一次看到 NexT 主题，就像<span class="exturl" data-url="aHR0cHM6Ly9pY2VoZS5naXRodWIuaW8vd2ViL2Jsb2dfY2hhbmdlbG9nLw==">这个<i class="fa fa-external-link-alt"></i></span>，真的把我惊艳到了，流畅的载入动画，自动展开并追随页面更新的目录，再加上简洁没有多余内容的页面，完全符合我对自己的博客的预期啊。于是最终决定就用这个主题了。</p>
<p>不过 NexT 的主页 <span class="exturl" data-url="aHR0cHM6Ly90aGVtZS1uZXh0Lm9yZw==">theme-next.org<i class="fa fa-external-link-alt"></i></span> 目前显示 Under Construction，没有最新的文档只有根据旧文档、网上的教程还有源代码自行摸索，网上很多教程和解决方案都是过时的，只好自己边做边摸索了。</p>
<p>然后发现，NexT 的配置又有一大堆，这简直就是在为难选择困难症的患者啊。。。</p>
<h3 id="3-1-方案选择"><a class="header-anchor" href="#3-1-方案选择"></a>3.1. 方案选择</h3>
<p>NexT 主题总共有 4 种方案：Muse，Mist，Pisces 和 Gemini，为选哪一个我纠结了有近 1 个小时，对比各个博客样例，又在本地挨个试了好几遍，去找它们的不同点。最后发现，Muse 和 Mist 可以算一类，目录都在右侧，可以选择动态载入，也可以选择直接显示或隐藏。Muse 的布局相对宽松一点，顶部标题栏也比较大；Mist 相对紧凑一点，所有标题和标签都放在了最顶上的一栏里。而 Pisces 和 Gemini 又可以算一类，目录和标题栏恒在左边，右边是正文，Pisces 的页面和前两个比较相似，纯黑白布局，连贯性很强；而 Gemini 则更传统一些，每篇文章之间分的清清楚楚。</p>
<p>最终我选择了 Gemini 方案，原因是我觉得目录的动态载入虽然显得比较高级，但文章整体左移的那一下还是显得有些晃眼了，而且目录在右、正文在左的布局让我有些不太习惯；而不用 Pisces 的原因则是文章之间没有明显的分界线，文章中的小标题也不是很显著，于是最后暂定了 Gemini 方案。（嗯，暂定，说不定那天我有回来打自己的脸了）</p>
<h3 id="3-2-插件"><a class="header-anchor" href="#3-2-插件"></a>3.2. 插件</h3>
<p>应该说，折腾这些插件是最费时间的，不但要面临各种选择，还要面临选完了发现用不了然后又得换的状况。。。有些插件本身有问题，需要手动修改才能使用，有些则根本不知道该怎么改。。。</p>
<h4 id="3-2-1-数学"><a class="header-anchor" href="#3-2-1-数学"></a>3.2.1. 数学</h4>
<p>数学公式的渲染最开始是打算用 MathJax，和以前保持一致就可以了。本来没有问题，但后来在利用 Travis-CI 自动部署的时候发现，远程安装的 pandoc 的版本不对，没有办法正确渲染，又找不到解决的办法，于是只能弃之而选择 katex。katex 其实我之前就听说过，据说比 MathJax 要快很多（公式一多的话 MathJax 确实太慢了），不过现在 0.10.0-rc1 的版本。由于前面的几篇文章里面还没有数学公式，我还没有真正试验过。</p>
<p>另外吐槽一句，npmjs 上的 hexo-renderer-markdown-it 的版本太老了，直接安装 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLXJlbmRlcmVyLW1hcmtkb3duLWl0">Github<i class="fa fa-external-link-alt"></i></span> 上的版本就可以了，这个插件已经更新了，但仓库里的模块还没有更新。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">$ <span class="built_in">cat</span> package-lock.json | jq .dependencies.\&quot;hexo-renderer-markdown-it\&quot;</span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;version&quot;</span>: <span class="string">&quot;github:hexojs/hexo-renderer-markdown-it#89a5abe048f5a43b42328ad012fb445ded6e665b&quot;</span>,</span><br><span class="line">  <span class="string">&quot;from&quot;</span>: <span class="string">&quot;github:hexojs/hexo-renderer-markdown-it&quot;</span>,</span><br><span class="line">  <span class="string">&quot;requires&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;lodash.assign&quot;</span>: <span class="string">&quot;^4.2.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it&quot;</span>: <span class="string">&quot;^8.4.1&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-abbr&quot;</span>: <span class="string">&quot;^1.0.4&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-cjk-breaks&quot;</span>: <span class="string">&quot;^1.1.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-container&quot;</span>: <span class="string">&quot;^2.0.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-deflist&quot;</span>: <span class="string">&quot;^2.0.3&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-emoji&quot;</span>: <span class="string">&quot;^1.4.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-footnote&quot;</span>: <span class="string">&quot;^3.0.1&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-ins&quot;</span>: <span class="string">&quot;^2.0.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-mark&quot;</span>: <span class="string">&quot;^2.0.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-sub&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;markdown-it-sup&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;sluggo&quot;</span>: <span class="string">&quot;^0.2.0&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>不过该模块会使得 <code>&lt;!-- more --&gt;</code> 失效，需要写成</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">escape</span>&gt;</span><span class="comment">&lt;!-- more --&gt;</span><span class="tag">&lt;/<span class="name">escape</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>才行。</p>
<p>不过我不喜欢一点进来就到文章半截的模式，所以对我来说没有什么影响，还是乖乖地写 description 吧。</p>
<p>另外这一部分文档严重不足，只能看自带 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLXJlbmRlcmVyLW1hcmtkb3duLWl0L3dpa2kvQWR2YW5jZWQtQ29uZmlndXJhdGlvbg==">wiki<i class="fa fa-external-link-alt"></i></span> 和 markdown-it 的例子来写。</p>
<h4 id="3-2-2-评论"><a class="header-anchor" href="#3-2-2-评论"></a>3.2.2. 评论</h4>
<p>关于评论模块，暂时还是采用了 Disqus 的评论系统，好处是不用折腾，因为是以前就配置好的，直接用就可以了，而且功能也足够强大，不过也有几个问题：</p>
<ul>
<li>必须登录才能评论。不过我看到有文章说 Disqus 现在支持匿名评论了，有时间再去看一下。</li>
<li>被 W。这个是最主要的问题，目前看来解决方案有两个，一个是利用其他的服务器转发一下，例如 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2Zvb2xlYXAvZGlzcXVzLXBocC1hcGk=">fooleap/disqus-php-api<i class="fa fa-external-link-alt"></i></span>，另一个是换用其他的评论系统，比如 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2ltc3VuL2dpdG1lbnQ=">gitment<i class="fa fa-external-link-alt"></i></span>/<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2dpdGFsay9naXRhbGs=">gitalk<i class="fa fa-external-link-alt"></i></span> 或者 <span class="exturl" data-url="aHR0cHM6Ly92YWxpbmUuanMub3Jn">Valine<i class="fa fa-external-link-alt"></i></span>，不过这次没有时间在折腾了，留待有时间再解决吧。</li>
</ul>
<h4 id="3-2-3-Pangu"><a class="header-anchor" href="#3-2-3-Pangu"></a>3.2.3. Pangu</h4>
<p>这是一个不错的模块，来自与 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3ZpbnRhL3Bhbmd1Lmpz">pangu.js<i class="fa fa-external-link-alt"></i></span>，可以在英文和中文之间自动加入空格，让中英文的混排看起来更舒服一下。</p>
<h4 id="3-2-4-Han"><a class="header-anchor" href="#3-2-4-Han"></a>3.2.4. Han</h4>
<p>汉字排版模块，可以调整中文页面的布局，提供了着重号、拼音上标等功能，来自 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2V0aGFudHcvSGFu">Han<i class="fa fa-external-link-alt"></i></span>。 我比较看中的着重号的功能，因为在英文中，强调使用斜体表示的，就像<em lang="en">emphasize</em>这样，而中文一旦<em lang="en">斜体</em>就会变得非常难看。因此如果用<em>着重号</em>的话会好看很多。</p>
<p>不过这个插件折腾了我足足半天，原始的 css 文件能够加着重号，但是会把页面变得非常拥挤；<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvdGhlbWUtbmV4dC1oYW4=">theme-next-han<i class="fa fa-external-link-alt"></i></span> 里的 css 文件倒是不会改变页面布局，但是着重号的功能却没有了。于是我去翻了源代码，然后发现，为了解决 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2lpc3NuYW4vaGV4by10aGVtZS1uZXh0L2lzc3Vlcy8xNjQ1">#1645<i class="fa fa-external-link-alt"></i></span>，<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2lpc3NuYW4vaGV4by10aGVtZS1uZXh0L3B1bGwvMTc4MA==">#1780<i class="fa fa-external-link-alt"></i></span> 把很多有用的内容也删掉了，问题倒是解决了，但剩下的基本上就没有什么作用了。于是我又去翻了 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2V0aGFudHcvSGFu">Han<i class="fa fa-external-link-alt"></i></span> 的源码，发现只要把 <code>well-knit</code> 模块禁掉就可以了，于是又生成了新的 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3dhbmdqaWV6aGUvSGFuL2NvbW1pdC82ZThjZTI1OTJhNDc4NmI4YWQ3MjMwYTJkMzg3MTc3MDMwYzY2Y2Fm">han.min.css<i class="fa fa-external-link-alt"></i></span> 文件，使之能够正常显示。</p>
<p>话说我这篇文章写了得有两天的时间，中间有大一部分时间就是去弄这个了。</p>
<h4 id="3-2-5-canvas-nest"><a class="header-anchor" href="#3-2-5-canvas-nest"></a>3.2.5. canvas-nest</h4>
<p>背景动态渲染，来自 <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2h1c3RjYy9jYW52YXMtbmVzdC5qcw==">canvas-nest.js<i class="fa fa-external-link-alt"></i></span>。以前看别人的博客遇到这个觉得很好玩，于是这次自己也就加上了。</p>
<p>不过遗憾的是，Gemini 的博文部分是不显示背景的，好像是把底层背景覆盖了。试了一下四种方案，好像只有 Gemini 是这个样子。。。</p>
<h4 id="3-2-6-note"><a class="header-anchor" href="#3-2-6-note"></a>3.2.6. note</h4>
<p>可以插入提示块，效果如 <span class="exturl" data-url="aHR0cHM6Ly9qaW5uc2pqLmdpdGh1Yi5pby91bmNhdGVnb3JpemVkL2hleG8tbmV4dC1ub3RlLw==">在hexo-NexT中插入note提示块<i class="fa fa-external-link-alt"></i></span> 中所示，还是很有用的。不过在文档中完全没有提到，要不是仔细翻看配置文件根本发现不了。</p>
<h4 id="3-2-7-reading-progress"><a class="header-anchor" href="#3-2-7-reading-progress"></a>3.2.7. reading-progress</h4>
<p>可以在最上方显示阅读的进度条，以前也用过，这次也就加上了。</p>
<h3 id="3-3-自动部署"><a class="header-anchor" href="#3-3-自动部署"></a>3.3. 自动部署</h3>
<p>关于 GitHub Pages 的部署，我将源代码存储在 source 分支，然后利用 Travis-CI 自动构建并部署到 master 分支。具体看参见 <span class="exturl" data-url="aHR0cHM6Ly93d3cuaXRmYW5yLmNjLzIwMTcvMDgvMDkvdXNpbmctdHJhdmlzLWNpLWF1dG9tYXRpYy1kZXBsb3ktaGV4by1ibG9ncy8=">使用Travis CI自动部署Hexo博客<i class="fa fa-external-link-alt"></i></span>，基本上 copy 过来就可以了。</p>
<p>另外，我的主题是 Fork 的 Next 的主题，然后在上面进行修改，在用 git submodule 引入进来，结果好几次自动部署失败都是因为修改完主题之后忘记 push 了。。。</p>
<p>而 GitLab Pages 的部署则要简单许多，只需要照着官方的例子写一个 <code>.gitlab-ci.yml</code> 文件就可以。</p>
<h2 id="4-待改进的部分"><a class="header-anchor" href="#4-待改进的部分"></a>4. 待改进的部分</h2>
<p>还有一些部分模块这次没有时间弄了，留着下次有时间再解决吧。一部分现在能想到的我先列举在这里，省得以后又忘了：</p>
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 字数统计</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 阅读次数统计</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 分享按钮</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 站内搜索。试过 LocalSearch，但搜索得到的链接始终不对，还没有找到原因，暂时禁用了。（暴力替换解决了）</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 分类页面。未能正确生成分类的页面。（要用复数的 categories）</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 页脚设置</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 版权设置。增加适合于转载文章的版声明。</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 字体调整。</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 代码高亮优化。不喜欢现在的高亮主题，</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 超链接显示颜色</li>
</ul>
<blockquote>
<p>P.S. 话说我为什么这么爱用话说。。。</p>
</blockquote>

    </div>

    
    
    

    <footer class="post-footer">
          

<div class="post-copyright">
<ul>
  <li class="post-copyright-author">
      <strong>本文作者： </strong>西风冷香
  </li>
  <li class="post-copyright-link">
      <strong>本文链接：</strong>
      <a href="https://wangjiezhe.gitee.io/posts/2018-10-05-refactor-blog/" title="博客的重构与回顾">https://wangjiezhe.gitee.io/posts/2018-10-05-refactor-blog/</a>
  </li>
  <li class="post-copyright-license">
      <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

          <div class="followme">
  <span>欢迎关注我的其它发布渠道</span>

  <div class="social-list">

      <div class="social-item">
          <span class="social-link">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">WeChat</span>
          </span>

          <img class="social-item-img" src="/images/wechat_channel.jpg">
      </div>

      <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
      </div>
  </div>
</div>

          <div class="post-tags">
              <a href="/tags/Fedora/" rel="tag"><i class="fa fa-tag"></i> Fedora</a>
              <a href="/tags/Blog/" rel="tag"><i class="fa fa-tag"></i> Blog</a>
              <a href="/tags/ArchLinux/" rel="tag"><i class="fa fa-tag"></i> ArchLinux</a>
              <a href="/tags/Hexo/" rel="tag"><i class="fa fa-tag"></i> Hexo</a>
              <a href="/tags/NexT/" rel="tag"><i class="fa fa-tag"></i> NexT</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/posts/2015-08-20-Linux-Notes-4/" rel="prev" title="Linux 随学随记 (4)">
                  <i class="fa fa-angle-left"></i> Linux 随学随记 (4)
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/posts/2018-10-24-prime-of-the-form-6k1/" rel="next" title="形如 6k±1 的素数">
                  形如 6k±1 的素数 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






      <div class="tabs tabs-comment">
        <ul class="nav-tabs">
            <li class="tab"><a href="#comment-disqusjs">Disqus</a></li>
            <li class="tab"><a href="#comment-giscus">GitHub</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane disqusjs" id="comment-disqusjs">
              
  <div class="comments disqusjs-container">
    <noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
  </div>
  
            </div>
            <div class="tab-pane giscus" id="comment-giscus">
              
  
  <div class="comments giscus-container">
  </div>
  
  
            </div>
        </div>
      </div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="beian"><span class="exturl" data-url="aHR0cHM6Ly9iZWlhbi5taWl0Lmdvdi5jbg=="><nopangu>冀ICP备2024063721号-1</nopangu> </span>
      <img src="/images/gongan.png" alt=""><span class="exturl" data-url="aHR0cHM6Ly9iZWlhbi5tcHMuZ292LmNuLyMvcXVlcnkvd2ViU2VhcmNoP2NvZGU9MTMwOTAyMDIwMDA3MTY="><nopangu>冀公网安备13090202000716号</nopangu> </span>
  </div>
  <div class="copyright">
    &copy; 2014 – 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">西风冷香</span>
  </div>
<div class="wordcount">
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
    <span title="站点总字数">223k</span>
  </span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>
  <div class="powered-by">由 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & <span class="exturl" data-url="aHR0cHM6Ly90aGVtZS1uZXh0LmpzLm9yZw==">NexT.Gemini</span> 强力驱动
  </div>

<div class="blog-links">
    <span class="post-meta-item moe">
      <span>
        <img src="/images/icp-moe.png" style="width:auto;height:16px;" alt="">
      </span>
      <span><span class="exturl" data-url="aHR0cHM6Ly9pY3AuZ292Lm1vZS8/a2V5d29yZD0yMDI0ODE5MQ=="><nopangu>萌ICP备20248191号</nopangu></span>
      </span>
    </span>
    <span class="post-meta-item travel-moe">
      <span><span class="exturl" data-url="aHR0cHM6Ly90cmF2ZWwubW9lL2dvLmh0bWw/dHJhdmVsPW9u"><img src="/images/travel-moe.png" style="width:auto;height:18px" title="异次元之旅-跃迁-我们一起去萌站成员的星球旅行吧！"> 异次元之旅🚀</span>
      </span>
    </span>
    <span class="post-meta-item foreverblog"><span class="exturl" data-url="aHR0cHM6Ly93d3cuZm9yZXZlcmJsb2cuY24vYmxvZy8yMDkyLmh0bWw="><img src="/images/foreverblog.png" style="width:auto;height:16px;" alt="Forever Blog"></span>
    </span>
    <span class="post-meta-item wormhole"><span class="exturl" data-url="aHR0cHM6Ly93d3cuZm9yZXZlcmJsb2cuY24vZ28uaHRtbA=="><img src="/images/wormhole.gif" style="width:auto;height:24px;" alt="" title="穿梭虫洞-随机访问十年之约友链博客"></span>
    </span>
    <span class="post-meta-item travelling"><span class="exturl" data-url="aHR0cHM6Ly93d3cudHJhdmVsbGluZ3MuY24vZ28uaHRtbA=="><img src="/images/travelling.png" alt="开往-友链接力" height="18"></span>
    </span>
  
</div>

<script>
function checkWebp(callback) {
  var img = new Image();
  img.onload = function () { callback((img.width > 0) && (img.height > 0)); };
  img.onerror = function () { callback(false); };
  img.src = '';
}
function showImage(useWebp) {
  var imgs = [].slice.call(document.querySelectorAll('img'));
  imgs.forEach(function (e) {
    if ((useWebp) && !e.classList.contains('nowebp')) {
      var src = e.getAttribute('data-src')
      if (src !== null) {
        src = src.replace(/\.jpg$/, '.webp').replace(/\.jpeg$/, '.webp').replace(/\.png$/, '.webp').replace(/\.gif$/, '.webp');
        e.setAttribute('data-src', src);
      }
      src = e.getAttribute('src')
      if (src !== null) {
        src = src.replace(/\.jpg$/, '.webp').replace(/\.jpeg$/, '.webp').replace(/\.png$/, '.webp').replace(/\.gif$/, '.webp');
        e.setAttribute('src', src);
      }
    }
  });
}
</script>
<script data-pjax async>
checkWebp(showImage);
</script>


    </div>
  </footer>

  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdn.staticfile.net/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.net/next-theme-pjax/0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.net/medium-zoom/1.1.0/medium-zoom.min.js" integrity="sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.net/lozad.js/1.16.0/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/sidebar.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="https://cdn.staticfile.net/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>

  <script class="next-config" data-name="pdf" type="application/json">{"object_url":{"url":"https://cdn.staticfile.net/pdfobject/2.3.0/pdfobject.min.js","integrity":"sha256-JJZNsid68vnh3/zyj0lY9BN5ynxVX/12XgOa1TlaYN0="},"url":"/lib/pdf/web/viewer.html"}</script>
  <script src="/js/third-party/tags/pdf.js"></script>






  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  <script src="https://cdn.staticfile.net/firebase/10.14.1/firebase-app-compat.js" integrity="sha256-KsPwUaqMNX8FDBi2qNV4Z/We2FthlJrPIRQhOVgfXMQ=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.net/firebase/10.14.1/firebase-firestore-compat.js" integrity="sha256-oPdfryMK6T4WGGJbidMkl/7TIOrnkCJ8BqrOT8En2a4=" crossorigin="anonymous"></script>
  <script class="next-config" data-name="firestore" type="application/json">{"enable":true,"collection":"articles","apiKey":"AIzaSyD0AfWHrmFoKgV1x4srPQDN7rGpGclK7J4","projectId":"visitors-of-blog"}</script>
  <script src="/js/third-party/statistics/firestore.js"></script>



  

  <script class="next-config" data-name="enableMath" type="application/json">false</script><link rel="stylesheet" href="https://cdn.staticfile.net/KaTeX/0.16.9/katex.min.css" integrity="sha256-UF1fgpAiu3tPJN/uCqEUHNe7pnr+QR0SQDNfgglgtcM=" crossorigin="anonymous">
  <script class="next-config" data-name="katex" type="application/json">{"copy_tex_js":{"url":"https://cdn.staticfile.net/KaTeX/0.16.9/contrib/copy-tex.min.js","integrity":"sha256-Us54+rSGDSTvIhKKUs4kygE2ipA0RXpWWh0/zLqw3bs="}}</script>
  <script src="/js/third-party/math/katex.js"></script>


  <script src="https://cdn.staticfile.net/quicklink/2.3.0/quicklink.umd.js" integrity="sha256-yvJQOINiH9fWemHn0vCA5lsHWJaHs6/ZmO+1Ft04SvM=" crossorigin="anonymous"></script>
  <script class="next-config" data-name="quicklink" type="application/json">{"enable":true,"home":false,"archive":false,"delay":true,"timeout":3000,"priority":true,"url":"https://wangjiezhe.gitee.io/posts/2018-10-05-refactor-blog/"}</script>
  <script src="/js/third-party/quicklink.js"></script>
<script class="next-config" data-name="giscus" type="application/json">{"enable":true,"repo":"wangjiezhe/wangjiezhe.github.io","repo_id":"MDEwOlJlcG9zaXRvcnkxNTc4OTE0Ng==","category":"Announcements","category_id":"DIC_kwDOAPDsWs4Cdwtf","mapping":"og:title","strict":1,"reactions_enabled":1,"emit_metadata":1,"theme":"preferred_color_scheme","lang":"zh-CN","crossorigin":"anonymous","input_position":"top","loading":"lazy"}</script>

<script>
document.addEventListener('page:loaded', () => {
  if (!CONFIG.page.comments) return;

  NexT.utils.loadComments('.giscus-container')
    .then(() => NexT.utils.getScript('https://giscus.app/client.js', {
      attributes: {
        async                   : true,
        crossOrigin             : 'anonymous',
        'data-repo'             : CONFIG.giscus.repo,
        'data-repo-id'          : CONFIG.giscus.repo_id,
        'data-category'         : CONFIG.giscus.category,
        'data-category-id'      : CONFIG.giscus.category_id,
        'data-mapping'          : CONFIG.giscus.mapping,
        'data-strict'           : CONFIG.giscus.strict,
        'data-reactions-enabled': CONFIG.giscus.reactions_enabled,
        'data-emit-metadata'    : CONFIG.giscus.emit_metadata,
        'data-theme'            : CONFIG.giscus.theme,
        'data-lang'             : CONFIG.giscus.lang,
        'data-input-position'   : CONFIG.giscus.input_position,
        'data-loading'          : CONFIG.giscus.loading
      },
      parentNode: document.querySelector('.giscus-container')
    }));
});
</script>
<link rel="stylesheet" href="https://cdn.staticfile.net/disqusjs/3.0.2/styles/disqusjs.css" integrity="sha256-71XarXwNr1Td27HmZI9zjY+rMzRdush6/glo6VFXp7o=" crossorigin="anonymous">

<script class="next-config" data-name="disqusjs" type="application/json">{"enable":true,"api":"https://disqusjs.wangjiezhe.com/","apikey":"ENTX2OPfWXIYJpFIZ1WVpYt4F0Ri0PLUELMOCbM8HHIX9C9BqEbkBZWmK7lqKj7F","shortname":"wangjiezhe","js":{"url":"https://cdn.staticfile.net/disqusjs/3.0.2/disqusjs.es2015.umd.min.js","integrity":"sha256-okP99ZQKVpIy7+NogAMpGlIQzJa9XKXhIJcFgdju5bU="}}</script>
<script src="/js/third-party/comments/disqusjs.js"></script>



  <script async src="/js/cursor/fireworks.min.js" integrity="sha256-NVjeK0/Qni9W+mCWpzpw6IZTieyhLZJ5Kj4hdFjqSQc=" crossorigin="anonymous"></script>



<script src="/live2dw/lib/L2Dwidget.min.js?02887b17076210cf9f6ed81f0eed64e3"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/mikoto.model.json"},"display":{"position":"left"},"mobile":{"show":false},"log":false});</script></body>
</html>
